//package com.example.compose
//
//import androidx.compose.animation.AnimatedContent
//import androidx.compose.animation.AnimatedVisibility
//import androidx.compose.animation.AnimatedVisibilityScope
//import androidx.compose.animation.BoundsTransform
//import androidx.compose.animation.EnterTransition
//import androidx.compose.animation.ExitTransition
//import androidx.compose.animation.ExperimentalSharedTransitionApi
//import androidx.compose.animation.SharedTransitionLayout
//import androidx.compose.animation.SharedTransitionScope
//import androidx.compose.animation.core.ArcMode
//import androidx.compose.animation.core.ExperimentalAnimationSpecApi
//import androidx.compose.animation.core.FastOutSlowInEasing
//import androidx.compose.animation.core.keyframes
//import androidx.compose.animation.core.tween
//import androidx.compose.animation.fadeIn
//import androidx.compose.animation.fadeOut
//import androidx.compose.animation.slideInVertically
//import androidx.compose.animation.slideOutVertically
//import androidx.compose.foundation.Image
//import androidx.compose.foundation.background
//import androidx.compose.foundation.border
//import androidx.compose.foundation.clickable
//import androidx.compose.foundation.horizontalScroll
//import androidx.compose.foundation.interaction.MutableInteractionSource
//import androidx.compose.foundation.layout.Box
//import androidx.compose.foundation.layout.Column
//import androidx.compose.foundation.layout.Row
//import androidx.compose.foundation.layout.aspectRatio
//import androidx.compose.foundation.layout.fillMaxSize
//import androidx.compose.foundation.layout.fillMaxWidth
//import androidx.compose.foundation.layout.height
//import androidx.compose.foundation.layout.padding
//import androidx.compose.foundation.layout.requiredHeightIn
//import androidx.compose.foundation.layout.size
//import androidx.compose.foundation.rememberScrollState
//import androidx.compose.foundation.shape.CircleShape
//import androidx.compose.foundation.shape.RoundedCornerShape
//import androidx.compose.material.icons.Icons
//import androidx.compose.material.icons.outlined.Create
//import androidx.compose.material.icons.outlined.Favorite
//import androidx.compose.material.icons.outlined.Share
//import androidx.compose.material3.Icon
//import androidx.compose.material3.Surface
//import androidx.compose.material3.Text
//import androidx.compose.runtime.Composable
//import androidx.compose.runtime.getValue
//import androidx.compose.runtime.mutableStateOf
//import androidx.compose.runtime.remember
//import androidx.compose.runtime.setValue
//import androidx.compose.ui.Alignment
//import androidx.compose.ui.Modifier
//import androidx.compose.ui.draw.clip
//import androidx.compose.ui.geometry.Rect
//import androidx.compose.ui.graphics.Color
//import androidx.compose.ui.layout.ContentScale
//import androidx.compose.ui.res.painterResource
//import androidx.compose.ui.tooling.preview.Preview
//import androidx.compose.ui.unit.dp
//import androidx.compose.ui.unit.sp
//import androidx.navigation.NavType
//import androidx.navigation.compose.NavHost
//import androidx.navigation.compose.composable
//import androidx.navigation.compose.rememberNavController
//import androidx.navigation.navArgument
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//fun SharedElementApp_BoundsTransformExample() {
//    var showDetails by remember {
//        mutableStateOf(true)
//    }
//    SharedTransitionLayout {
//        AnimatedContent(targetState = showDetails, label = "basic_transition") { targetState ->
//            if (!targetState) {
//                MainContent(
//                    onShowDetails = { showDetails = true },
//                    sharedTransitionScope = this@SharedTransitionLayout,
//                    animatedVisibilityScope = this@AnimatedContent
//                )
//            } else {
//                DetailsContent(
//                    onBack = {
//                        showDetails = false
//                    },
//                    sharedTransitionScope = this@SharedTransitionLayout,
//                    animatedVisibilityScope = this@AnimatedContent
//                )
//            }
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class, ExperimentalAnimationSpecApi::class)
//@Composable
//private fun MainContent(
//    onShowDetails: () -> Unit,
//    modifier: Modifier = Modifier,
//    sharedTransitionScope: SharedTransitionScope,
//    animatedVisibilityScope: AnimatedVisibilityScope
//) {
//    with(sharedTransitionScope) {
//        Box(modifier = Modifier.fillMaxSize()) {
//            Row(
//                modifier = Modifier
//                    .padding(8.dp)
//                    .fillMaxWidth()
//                    .sharedBounds(
//                        sharedContentState = rememberSharedContentState(key = "bounds"),
//                        animatedVisibilityScope = animatedVisibilityScope,
//                        enter = fadeIn(
//                            tween(
//                                durationMillis = boundsAnimationDurationMillis,
//                                easing = FastOutSlowInEasing
//                            )
//                        ),
//                        exit = fadeOut(
//                            tween(
//                                durationMillis = boundsAnimationDurationMillis,
//                                easing = FastOutSlowInEasing
//                            )
//                        ),
//                        boundsTransform = boundsTransform
//                    )
//                    .border(
//                        width = 1.dp,
//                        color = Color.Gray.copy(alpha = 0.5f),
//                        shape = RoundedCornerShape(size = 8.dp)
//                    )
//                    .background(color = Color.LightGray, RoundedCornerShape(size = 8.dp))
//                    .clickable(
//                        interactionSource = remember {
//                            MutableInteractionSource()
//                        },
//                        indication = null
//                    ) {
//                        onShowDetails()
//                    }
//                    .padding(8.dp)
//            ) {
//                Image(
//                    painter = painterResource(id = R.drawable.bella),
//                    contentDescription = "Bella",
//                    modifier = Modifier
//                        .sharedElement(
//                            state = rememberSharedContentState(key = "image"),
//                            animatedVisibilityScope = animatedVisibilityScope,
//                            boundsTransform = boundsTransform
//                        )
//                        .size(100.dp)
//                        .clip(CircleShape),
//                    contentScale = ContentScale.Crop
//                )
//                val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
//                    keyframes {
//                        durationMillis = boundsAnimationDurationMillis
//                        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
//                        targetBounds at boundsAnimationDurationMillis
//                    }
//                }
//                Text(
//                    text = "大狗", fontSize = 21.sp, modifier = Modifier.sharedBounds(
//                        sharedContentState = rememberSharedContentState(key = "title"),
//                        animatedVisibilityScope = animatedVisibilityScope,
//                        boundsTransform = textBoundsTransform
//                    )
//                )
//            }
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class, ExperimentalAnimationSpecApi::class)
//@Composable
//private fun DetailsContent(
//    modifier: Modifier = Modifier,
//    onBack: () -> Unit,
//    sharedTransitionScope: SharedTransitionScope,
//    animatedVisibilityScope: AnimatedVisibilityScope
//) {
//    with(sharedTransitionScope) {
//        Box(modifier = Modifier.fillMaxSize()) {
//            Column(
//                modifier = Modifier
//                    .padding(top = 200.dp, start = 16.dp, end = 16.dp)
//                    .sharedBounds(
//                        sharedContentState = rememberSharedContentState(key = "bounds"),
//                        animatedVisibilityScope = animatedVisibilityScope,
//                        enter = fadeIn(
//                            tween(
//                                durationMillis = boundsAnimationDurationMillis,
//                                easing = FastOutSlowInEasing
//                            )
//                        ),
//                        exit = fadeOut(
//                            tween(
//                                durationMillis = boundsAnimationDurationMillis,
//                                easing = FastOutSlowInEasing
//                            )
//                        ),
//                        boundsTransform = boundsTransform
//                    )
//                    .border(
//                        width = 1.dp,
//                        color = Color.Gray.copy(alpha = 0.5f),
//                        shape = RoundedCornerShape(8.dp)
//                    )
//                    .background(color = Color.LightGray, shape = RoundedCornerShape(8.dp))
//                    .clickable(
//                        interactionSource = remember { MutableInteractionSource() },
//                        indication = null
//                    ) {
//                        onBack()
//                    }
//                    .padding(8.dp)
//            ) {
//                Image(
//                    painter = painterResource(id = R.drawable.bella),
//                    contentDescription = "大狗",
//                    modifier = Modifier
//                        .sharedElement(
//                            state = rememberSharedContentState(key = "image"),
//                            animatedVisibilityScope = animatedVisibilityScope,
//                            boundsTransform = boundsTransform
//                        )
//                        .size(size = 200.dp)
//                        .clip(CircleShape),
//                    contentScale = ContentScale.Crop
//                )
//                val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
//                    keyframes {
//                        durationMillis = boundsAnimationDurationMillis
//                        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
//                        targetBounds at boundsAnimationDurationMillis
//                    }
//                }
//                Text(
//                    text = "大狗",
//                    fontSize = 28.sp,
//                    modifier = Modifier.sharedBounds(
//                        sharedContentState = rememberSharedContentState(key = "title"),
//                        animatedVisibilityScope = animatedVisibilityScope,
//                        boundsTransform = textBoundsTransform
//                    )
//                )
//                Text(
//                    text = "【云几何内核开源平台OpenGeometry正式发布 构建新一代工业软件“根”技术】财联社11月5日电，OpenGeometry开源社区今日官微消息，11月5日，国内备受关注的云几何内核开源平台——OpenGeometry开源社区正式发布。OpenGeometry开源社区将通过搭建云几何内核的开源软件开发平台，构建新一代工业软件的核心“根”技术，为工业软件的产品研发提供支持，并带动上下游厂商、服务商等合作伙伴共同参与，最终形成产业链协同发展的良性循环。从行业角度来看，几何建模内核引擎相当于工业软件产业的“芯片”，是数字化设计、数字化制造、数字化建模和仿真、乃至数字化服务和运营的核心根技术。在传统 CAX 软件时代，西门子Parasolid 和 达索 ACIS 形成了几何建模引擎双寡头局面超过三十年。在当下第四次工业革命时代，新制造场景需要新一代工业软件，而新一代工业软件需要云几何内核。",
//                    modifier = Modifier.skipToLookaheadSize()
//                )
//            }
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//private val boundsTransform = BoundsTransform { _: Rect, _: Rect ->
//    tween(durationMillis = boundsAnimationDurationMillis, easing = FastOutSlowInEasing)
//}
//
//private const val boundsAnimationDurationMillis = 500
//
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//private fun SharedElement_Clipping() {
//    var showDetails by remember {
//        mutableStateOf(false)
//    }
//    SharedTransitionLayout {
//        AnimatedContent(targetState = showDetails, label = "basic_transition") { targetState ->
//            if (!targetState) {
//                Row(
//                    modifier = Modifier
//                        .sharedBounds(
//                            sharedContentState = rememberSharedContentState(key = "bounds"),
//                            animatedVisibilityScope = this@AnimatedContent
//                        )
//                        .background(color = Color.Green.copy(alpha = 0.5f))
//                        .padding(8.dp)
//                        .clickable {
//                            showDetails = true
//                        }
//                ) {
//                    Image(
//                        painter = painterResource(id = R.drawable.bella),
//                        contentDescription = "Bella",
//                        modifier = Modifier
//                            .size(100.dp)
//                            .sharedElement(
//                                state = rememberSharedContentState(key = "image"),
//                                animatedVisibilityScope = this@AnimatedContent
//                            )
//                            .clip(RoundedCornerShape(16.dp)),
//                        contentScale = ContentScale.Crop
//                    )
//                    Text(
//                        text = "Lore ipsum dolor sit amet.",
//                        fontSize = 21.sp,
//                        modifier = Modifier.sharedElement(
//                            state = rememberSharedContentState(key = "title"),
//                            animatedVisibilityScope = this@AnimatedContent
//                        )
//                    )
//                }
//            } else {
//                Column(
//                    modifier = Modifier
//                        .sharedBounds(
//                            sharedContentState = rememberSharedContentState(key = "bounds"),
//                            animatedVisibilityScope = this@AnimatedContent
//                        )
//                        .background(color = Color.Green.copy(alpha = 0.7f))
//                        .padding(top = 200.dp, start = 16.dp, end = 16.dp)
//                        .clickable {
//                            showDetails = false
//                        }
//                ) {
//                    Image(
//                        painter = painterResource(id = R.drawable.bella),
//                        contentDescription = "Bella",
//                        modifier = Modifier
//                            .size(200.dp)
//                            .sharedElement(
//                                state = rememberSharedContentState(key = "image"),
//                                animatedVisibilityScope = this@AnimatedContent
//                            )
//                            .clip(RoundedCornerShape(16.dp)),
//                        contentScale = ContentScale.Crop
//                    )
//                    Text(
//                        text = "Lore ipsum dolor sit amet.",
//                        fontSize = 21.sp,
//                        modifier = Modifier.sharedElement(
//                            state = rememberSharedContentState(key = "title"),
//                            animatedVisibilityScope = this@AnimatedContent
//                        )
//                    )
//                    Text(
//                        text = "【云几何内核开源平台OpenGeometry正式发布 构建新一代工业软件“根”技术】财联社11月5日电，OpenGeometry开源社区今日官微消息，11月5日，国内备受关注的云几何内核开源平台——OpenGeometry开源社区正式发布。OpenGeometry开源社区将通过搭建云几何内核的开源软件开发平台，构建新一代工业软件的核心“根”技术，为工业软件的产品研发提供支持，并带动上下游厂商、服务商等合作伙伴共同参与，最终形成产业链协同发展的良性循环。从行业角度来看，几何建模内核引擎相当于工业软件产业的“芯片”，是数字化设计、数字化制造、数字化建模和仿真、乃至数字化服务和运营的核心根技术。在传统 CAX 软件时代，西门子Parasolid 和 达索 ACIS 形成了几何建模引擎双寡头局面超过三十年。在当下第四次工业革命时代，新制造场景需要新一代工业软件，而新一代工业软件需要云几何内核。",
////                        modifier = Modifier.skipToLookaheadSize()
//                    )
//                }
//            }
//        }
//    }
//}
//
//@Composable
//private fun JetsnackBottomBar(modifier: Modifier) {
//
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Composable
//private fun EnterExitJetsnack() {
//    SharedTransitionLayout {
//        AnimatedVisibility(visible = true) {
//            JetsnackBottomBar(
//                modifier = Modifier
//                    .renderInSharedTransitionScopeOverlay(zIndexInOverlay = 1f)
//                    .animateEnterExit(
//                        enter = fadeIn() + slideInVertically { it },
//                        exit = fadeOut() + slideOutVertically { it }
//                    )
//            )
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//private fun SharedElement_SkipLookaheadSize() {
//    val selectionColor = Color(0xff3367ba)
//    var expanded by remember { mutableStateOf(true) }
//    SharedTransitionLayout(
//        modifier = Modifier
//            .fillMaxSize()
//            .clickable(
//                interactionSource = remember { MutableInteractionSource() },
//                indication = null
//            ) {
//                expanded = !expanded
//            }
//            .background(color = Color(0x88000000))
//    ) {
//        AnimatedVisibility(
//            visible = expanded,
//            enter = EnterTransition.None,
//            exit = ExitTransition.None
//        ) {
//            Box(modifier = Modifier.fillMaxSize()) {
//                Surface(
//                    modifier = Modifier
//                        .align(Alignment.BottomCenter)
//                        .padding(all = 20.dp)
//                        .sharedBounds(
//                            sharedContentState = rememberSharedContentState(key = "container"),
//                            animatedVisibilityScope = this@AnimatedVisibility
//                        )
//                        .requiredHeightIn(max = 60.dp)
//                ) {
//                    Row(
//                        modifier = Modifier
//                            .padding(10.dp)
//                            .skipToLookaheadSize()
//                    ) {
//                        Icon(
//                            imageVector = Icons.Outlined.Share,
//                            contentDescription = "Shared",
//                            modifier = Modifier.padding(
//                                top = 10.dp,
//                                bottom = 10.dp,
//                                start = 10.dp,
//                                end = 20.dp
//                            )
//                        )
//                        Icon(
//                            imageVector = Icons.Outlined.Favorite,
//                            contentDescription = "Favorite",
//                            modifier = Modifier.padding(
//                                top = 10.dp,
//                                bottom = 10.dp,
//                                start = 10.dp,
//                                end = 20.dp
//                            )
//                        )
//                        Icon(
//                            imageVector = Icons.Outlined.Create,
//                            contentDescription = "Create",
//                            tint = Color.White,
//                            modifier = Modifier
//                                .sharedBounds(
//                                    sharedContentState = rememberSharedContentState(key = "icon_background"),
//                                    animatedVisibilityScope = this@AnimatedVisibility
//                                )
//                                .background(
//                                    color = selectionColor,
//                                    shape = RoundedCornerShape(percent = 50)
//                                )
//                                .padding(
//                                    top = 10.dp,
//                                    bottom = 10.dp,
//                                    start = 20.dp,
//                                    end = 20.dp
//                                )
//                                .sharedElement(
//                                    state = rememberSharedContentState(key = "icon"),
//                                    animatedVisibilityScope = this@AnimatedVisibility
//                                )
//                        )
//                    }
//                }
//            }
//        }
//        AnimatedVisibility(
//            visible = !expanded,
//            enter = EnterTransition.None,
//            exit = ExitTransition.None
//        ) {
//            Box(modifier = Modifier.fillMaxSize()) {
//                Surface(
//                    modifier = Modifier
//                        .align(Alignment.BottomEnd)
//                        .padding(all = 30.dp)
//                        .sharedBounds(
//                            sharedContentState = rememberSharedContentState(key = "container"),
//                            animatedVisibilityScope = this@AnimatedVisibility,
//                            enter = EnterTransition.None
//                        )
//                        .sharedBounds(
//                            sharedContentState = rememberSharedContentState(key = "icon_background"),
//                            animatedVisibilityScope = this@AnimatedVisibility,
//                            enter = EnterTransition.None,
//                            exit = ExitTransition.None
//                        ),
//                    shape = RoundedCornerShape(size = 30.dp),
//                    color = selectionColor
//                ) {
//                    Icon(
//                        imageVector = Icons.Outlined.Create,
//                        contentDescription = "Create",
//                        tint = Color.White,
//                        modifier = Modifier
//                            .padding(30.dp)
//                            .size(40.dp)
//                            .sharedElement(
//                                state = rememberSharedContentState(key = "icon"),
//                                animatedVisibilityScope = this@AnimatedVisibility
//                            )
//                    )
//                }
//            }
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//fun PlaceholderSizeAnimated_Demo() {
//    SharedTransitionLayout {
//        val navController = rememberNavController()
//        NavHost(navController = navController, startDestination = "home") {
//            composable(
//                route = "home",
//                enterTransition = { fadeIn() },
//                exitTransition = { fadeOut() }) {
//                Column(modifier = Modifier.fillMaxSize()) {
//                    Row(modifier = Modifier.horizontalScroll(state = rememberScrollState())) {
//                        listSnacks.forEachIndexed { index, snack ->
//                            Image(
//                                painter = painterResource(id = snack.image),
//                                contentDescription = snack.description,
//                                contentScale = ContentScale.Crop,
//                                modifier = Modifier
//                                    .padding(8.dp)
//                                    .sharedBounds(
//                                        sharedContentState = rememberSharedContentState(key = "image-${snack.name}"),
//                                        animatedVisibilityScope = this@composable,
//                                        placeHolderSize = SharedTransitionScope.PlaceHolderSize.animatedSize
//                                    )
//                                    .clickable {
//                                        navController.navigate("details/$index")
//                                    }
//                                    .height(180.dp)
//                                    .clip(shape = RoundedCornerShape(8.dp))
//                                    .aspectRatio(9f / 16f)
//                            )
//                        }
//                    }
//                    Text(text = "Nearby snacks")
//                    Row(modifier = Modifier.horizontalScroll(state = rememberScrollState())) {
//                        listSnacks.forEach { snack ->
//                            Image(
//                                painter = painterResource(id = snack.image),
//                                contentDescription = snack.description,
//                                contentScale = ContentScale.Crop,
//                                modifier = Modifier
//                                    .height(200.dp)
//                                    .clip(shape = RoundedCornerShape(32.dp))
//                                    .aspectRatio(16f / 9f)
//                                    .padding(all = 8.dp)
//                            )
//                        }
//                    }
//                }
//            }
//            composable(
//                route = "details/{id}",
//                arguments = listOf(navArgument("id") { type = NavType.IntType }),
//                enterTransition = { fadeIn() },
//                exitTransition = { fadeOut() }
//            ) { backStackEntry ->
//                val id = backStackEntry.arguments?.getInt("id")
//                val snack = listSnacks[id!!]
//                Column(
//                    modifier = Modifier
//                        .fillMaxSize()
//                        .clickable { navController.navigateUp() }
//                ) {
//                    Image(
//                        painter = painterResource(id = snack.image),
//                        contentDescription = snack.description,
//                        contentScale = ContentScale.Crop,
//                        modifier = Modifier
//                            .sharedBounds(
//                                sharedContentState = rememberSharedContentState(
//                                    key = "image-${snack.name}"
//                                ),
//                                animatedVisibilityScope = this@composable,
//                                placeHolderSize = SharedTransitionScope.PlaceHolderSize.animatedSize
//                            )
//                            .clip(shape = RoundedCornerShape(size = 8.dp))
//                            .fillMaxWidth()
//                            .aspectRatio(9f / 16f)
//                    )
//                }
//            }
//        }
//    }
//}